<template>
  <view>
    <!-- 标题 -->
    <view class="fz-16 default-color mb-12 font-bold" style="word-break: break-all">
      <text>{{ data?.title }}</text>
    </view>
    <!-- 发布时间 -->
    <view v-if="data?.publishTime" class="mb-12 fz-12" style="color: #969799">
      <text>{{ formatToDate(data?.publishTime) }} 发布</text>
    </view>
    <!-- 交互数据 -->
    <view
      v-if="!hideStatistics&&[BoStatusEnum.Active,BoStatusEnum.Closed,BoStatusEnum.Expired,BoStatusEnum.Invalid].includes(data?.boStatus!)"
      class="disFlxAC fz-12 mb-12"
      style="color: #646566"
    >
      <text v-if="isNumber(data?.browseNum)">浏览：{{ data?.browseNum }}</text>
      <template v-if="isNumber(data?.collectPeopleNum)">
        <text class="mx-12 color2">|</text>
        <text>收藏：{{ data?.collectPeopleNum }}</text>
      </template>
      <template v-if="isNumber(data?.cooperationNum)">
        <text class="mx-12 color2">|</text>
        <text>合作意向：{{ data?.cooperationNum }}</text>
      </template>
      <template v-if="isNumber(data?.cooperationSuccessNum)">
        <text class="mx-12 color2">|</text>
        <text>已联系：{{ data?.cooperationSuccessNum }}</text>
      </template>
    </view>
    <!-- 代发标签 -->
    <view
      v-if="data?.releaseType === ReleaseTypeEnum.insteadMember"
      class="sys-tag px-8 py-2 br-10 fz-12 mb-12"
    >
      <text>本条供需信息由秘书处代发</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { ISupplyDemandDetailsResult } from '@/api/businessOpportunities/type';
  import { ReleaseTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { formatToDate } from '@/utils/dateUtil';
  import { propTypes } from '@/utils/propTypes';
  import { isNumber } from 'lodash-es';
  import type { PropType } from 'vue';
  import { BoStatusEnum } from '@/enums/businessOpportunitiesEnum';

  defineProps({
    data: Object as PropType<ISupplyDemandDetailsResult>,
    /** 隐藏统计数据 */
    hideStatistics: propTypes.bool.def(false),
  });
</script>

<style lang="scss" scoped>
  .sys-tag {
    background-color: #fff4e7;
    color: #e29942;
    width: fit-content;
  }

  .color2 {
    color: #c8cacc;
  }
</style>
